<template>
  <div class="login">
    <Row>
      <!-- <Col :xs="24" :sm="24" :lg="24">
      <Row>
        <Col :xs="24" :sm="12" :lg="6">
        <div class="topLogo">

        </div>
        </Col>
      </Row>
      </Col>
      <Col :xs="0" :sm="4" :lg="6"> &nbsp;</Col> -->
      <Col :xs="24" :sm="16" :lg="12">
      <Row class="rowBack" style="display: flex;">
        <div class="loginClass">
          <img :src="baseImgeUrl + logins" height="100%" width="400px" />
        </div>
        <Card icon="log-in"
          style="min-width: 400px; height: 100%;display: flex;align-items: center;justify-content: center;"
          :bordered="false" class="cardWidth">
          <div class="form-con">
            <div
              style="font-size: 24px;margin-bottom: 60px; display: flex; align-items: center;justify-content: center;font-weight: 500">
              <img :src="baseImgeUrl + logo" style="width: 30px; height: 30px;margin-right: 10px;">{{ website_title }}
            </div>
            <login-form style="display: flex; justify-content: center;align-items: center;"
              @on-success-valid="handleSubmit"></login-form>
          </div>
        </Card>
      </Row>
      </Col>
    </Row>
    <div class="bottonText">
      <p>Copyright 2015-2021 </p>
      <p>All Rights Reserved.<a href="https://beian.miit.gov.cn/" target="_blank">备案号：{{ company_no }}</a></p>
    </div>
  </div>
</template>

<script>
import config from "@/config";
import LoginForm from "_c/login-form";
import { mapActions } from "vuex";
import logo from "@/assets/images/login-logo.png";
import logins from "@/assets/images/login.jpg";
import { setToken } from '@/libs/util'
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
  data() {
    return {
      logo,
      logins,
      baseUrl: baseUrl,
      baseImgeUrl: baseImgeUrl,
      website_title: '管理系统',
      company_no: "",
    };
  },
  components: {
    LoginForm,
  },
  methods: {
    ...mapActions(["handleLogin", "getUserInfo", "resetLoginTabNav"]),
    handleSubmit(data) {
      this.handleLogin(data).then((res) => {
        this.resetLoginTabNav();
        this.getUserInfo().then((res) => {
          this.$router.push({
            name: this.$config.homeName,
          });
        });
      });
    },
  },
  mounted() {
    // this.$axios('/admin/index/getWebConfig', {}).then(res => {
    let result = localStorage.getItem('website_config');
    if (result) {
      let res = JSON.parse(result);
      this.logins = res.login_img;
      this.logo = res.logo;
      this.website_title = res.site_title;
      this.company_no = res.company_no;
    }

    // });
  }
};
</script>

<style lang="less">
.topLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;

  /* width: 20%; */
}

.login {
  height: 100vh;
  background-color: #F6F6F6;
  background-image: url('../../assets/images/bg.png');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  // flex-direction: column;
}

.cardWidth {
  min-width: 200px;

}

.rowBack {
  background-color: #fff;
  border-radius: 20px;
  height: 50vh;
}

.loginClass {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.bottonText {
  height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
}
</style>
